<template>
  <view class="container">
    <NavBar title="验证码"></NavBar>
    <WxMobileHeader title="请输入验证码" :info="`验证码已发送至:${phone}`"></WxMobileHeader>
	<u-code-input 
			v-model="code" 
			mode="line" 
			:maxlength="6" 
			space="20"
			:focus="true"
			color="#bbb" 
			borderColor="rgb(31, 182, 131)"
			@change="submit">
	</u-code-input>
    <view class="btnWrap">
      <u-button type="success" size="mini" :disabled="sending" @click="resend" :text="msg"></u-button>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/NavBar/NavBar'
import WxMobileHeader from './components/WxMobile-header'
import { mapMutations } from 'vuex';
export default {
  components: {
    NavBar,
    WxMobileHeader
  },
  data () {
    return {
      mobile: '',
      code: '',
      count: 180,
      ctrl: null,
      sending: false
    }
  },
  computed: {
    phone () {
      return this.mobile.substr(0, 3) + '****' + this.mobile.substr(7, 10)
    },
    msg () {
      let str = '重新获取'
      if (this.sending) {
        str += '(' + (this.count + '').padStart(2, '0') + 's)'
      }
      return str
    }
  },
  onLoad (data) {
    this.mobile = data.mobile
    this.setTimer()
  },
  methods: {
    setTimer () {
      clearInterval(this.ctrl)
      this.sending = true
      this.ctrl = setInterval(() => {
        this.count--
        if (this.count === 0) {
          this.count = 180
          this.sending = false
          clearInterval(this.ctrl)
        }
      }, 1000)
    },
    ...mapMutations(['setUserInfo', 'setToken', 'setRefreshToken']),
    async submit (val) {
      if (/\d{6}/.test(val)) {
        const res = await this.$axios.api.mobileLogin({
          phone: this.mobile,
          code: val
        })
        const { code, data, token, refreshToken } = res
        if (code === 200) {
          this.setUserInfo(data)
          this.setToken(token)
          this.setRefreshToken(refreshToken)
          uni.showToast({
            title: '登录成功,2秒后跳转',
            icon: 'none',
            duration: 2000
          })
          setTimeout(() => {
            uni.navigateBack({ delta: 3 })
          }, 2000)
        } else if(code === 201){
			this.setUserInfo(data)
			this.setToken(token)
			this.setRefreshToken(refreshToken)
			uni.showToast({
			  title: '登录成功,请设置密码',
			  icon: 'none',
			  duration: 2000
			})
			uni.$emit('h5AddPassword',{
				show:true,
				mobile:this.mobile
			})
			setTimeout(() => {
			  uni.navigateBack({ delta: 2 })
			}, 1000)
		}else if(code === 500) {
          uni.showToast({
            title: '验证失败,请核对后重试！',
            icon: 'none',
            duration: 2000
          })
        }
      }
    },
    resend () {
      this.$u.api.sendCode({
        mobile: this.mobile
      }).then(res => {
        if (res.code === 200) {
          this.setTimer()
          uni.showToast({
            title: '获取成功',
            icon: 'none',
            duration: 2000
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  padding: 20rpx;
  background-color: rgba(31, 182, 131, 0.1);
  .btnWrap {
	width: 160rpx;
    height: 100rpx;
	margin-top: 40rpx;
  }
}
</style>